<template>
  <view class="address-container">    
    <!-- 地址信息卡片 -->
    <view class="address-card">
      <view class="card-header">
        <image class="location-icon" src="/static/index/notice.png" mode="aspectFit"></image>
        <text class="card-title">公司信息</text>
      </view>
      
      <!-- 联系电话 -->
      <view class="info-item">
        <view class="info-label">
          <uni-icons type="contact" size="20" color="#666666" class="icon"></uni-icons>
          <text>联系电话</text>
        </view>
        <view class="info-content">
          <text class="phone-number">18938918032</text>
          <button class="call-btn" @click="makeCall">拨打</button>
        </view>
      </view>
      
      <!-- 公司地址 -->
      <view class="info-item">
        <view class="info-label">
          <uni-icons type="location" size="20" color="#666666" class="icon"></uni-icons>
          <text>公司地址</text>
        </view>
        <view class="info-content">
          <text class="address-text">深圳市罗湖区水贝二路A座1702</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CompanyAddress',
  data() {
    return {
      phoneNumber: '18938918032',
      address: '深圳市罗湖区水贝二路A座1702'
    }
  },
  methods: {
    // 拨打电话
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber,
        success: () => {
          console.log('拨打电话成功')
        },
        fail: (err) => {
          console.error('拨打电话失败:', err)
          uni.showToast({
            title: '拨打电话失败',
            icon: 'none'
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.address-container {
  min-height: 100vh;
  background-color: #f5f5f6;
  padding: 20rpx 26rpx;
}

.address-card {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    
    .location-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
    
    .card-title {
      font-size: 28rpx;
      font-weight: 600;
      color: $uni-text-color-black;
    }
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      display: flex;
    //   align-items: center;
      flex: 1;
      
      .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #666666;
      }
    }
    
    .info-content {
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
      
      .phone-number {
        font-size: 28rpx;
        color: #333333;
        margin-right: 20rpx;
        font-weight: 500;
      }
      
      .address-text {
        font-size: 28rpx;
        color: #333333;
        margin-right: 20rpx;
        text-align: right;
        max-width: 400rpx;
      }
      
      .call-btn{
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        border: none;
        border-radius: 10rpx;
        padding: 0rpx 12rpx;
        font-size: 24rpx;
        min-width: 80rpx;
      }
    }
  }
}
</style>
